<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>用户列表</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="../../lib/layui/css/layui.css">
   <script type="text/javascript" src="../../js/config.js"></script>
   <style>
      .ok-body {
         padding: 20px;
      }
   </style>
</head>
<body>
<div class="ok-body">
   <blockquote class="layui-elem-quote">
      <p>主要讲述如何在内部页面添加导航。</p>
      <p>特别注意：添加导航的同时必须要遵守指定的写法</p>
      <p>1.必须指定一个html元素</p>
      <p>2.此元素的属性必须有data-url和lay-id</p>
      <p>3.data-url属性表示指定的页面且必须是网站的绝对路径</p>
      <p>4.lay-id属性，请不要以数字开头，推荐以字母开头，长度不限</p>
      <p>5.当lay-id重复时，那么则只会打开一个，后者只会定位到当前选项卡</p>
   </blockquote>
   <pre lay-title="JavaScript">
   layui.config({
      base: '/js/'
   }).use(['okTab'],function(){
      var okTab = layui.okTab();
      var page = '&lt;div lay-id="add-1" data-url="/pages/user/user.html"&gt;个人中心&lt;/div&gt;';
      okTab.tabAdd(page);
   })
   </pre>
   <div class="layui-card">
      <button class="layui-btn" id="addNav1">
         <i class="layui-icon">&#xe61f;</i>新的选项卡1
      </button>
      <button class="layui-btn" id="addNav2">
         <i class="layui-icon">&#xe61f;</i>新的选项卡2
      </button>
      <button class="layui-btn" id="addNav3" lay-id="add-3" data-url="https://cn.vuejs.org/v2/api/">
         <i class="layui-icon">&#xe61f;</i>新的选项卡3
      </button>
      <button class="layui-btn" id="addNav4" data-url="/pages/user/user.html">
         <i class="layui-icon">&#xe61f;</i>没有加lay-id
      </button>
      <a class="layui-btn" href="../../pages/user/user.html">普通跳转页</a>
   </div>

   <div class="layui-card">
      <button class="param layui-btn" data-url="/pages/help/navOperate.html?param=a">
         跳转传参a
      </button>
      <button class="param layui-btn" data-url="/pages/help/navOperate.html?param=b">
         跳转传参b
      </button>
      <button class="param2 layui-btn">
         不会被关闭的导航c
      </button>
   </div>

</div>
</body>
</html>
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
   function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg);  //匹配目标参数
      if (r != null) return unescape(r[2]);
      return null; //返回参数值
   }
</script>
<script type="text/javascript">
   layui.use(['element', 'table', 'form', 'jquery', 'laydate', 'okTab', 'code'], function () {
      var $ = layui.jquery;
      var p_layer = parent.layer || layer;
      var okTab = layui.okTab();

      var code = layui.code;
      code({
         elem: 'pre'
      });

      $("#addNav1").click(function () {
         //方式一（推荐）
         var url = $page + "pages/user/user.html";
         var page = '<div lay-id="add-1" data-url="' + url + '"><cite>个人中心</cite></div>';
         okTab.tabAdd(page);
      });

      $("#addNav2").click(function () {
         //方式二(获取父级对象进行添加)
         var p_layui = parent.layui;//获取父级的layui
         var p_okTab = p_layui.okTab();//拿到导航操作对象
         var url = $page + "pages/user/user.html";
         var page = '<a lay-id="u-1" href="javascript:;" data-url="' + url + '"><cite>个人中心</cite><span class="layui-badge-dot"></span></a>';
         p_okTab.tabAdd(page);
      });

      $("#addNav3,#addNav4").click(function () {
         okTab.tabAdd(this);
      });

      $("button.param").click(function () {
         var url = $page + $(this).attr("data-url");
         var page = '<div lay-id="param" data-url="' + url + '"><cite>选项卡传参</cite></div>';
         okTab.tabAdd(page);
      });
     $("button.param2").click(function () {
       var url = $page + '/pages/help/navOperate.html?param=c';
       var page = '<div lay-id="param2" is-close="false" data-url="' + url + '">不会被关闭</div>';
       okTab.tabAdd(page);
     });

      var getParam = getUrlParam("param");
      if (getParam) {
         layer.msg("参数为" + getParam);
      }
   });

</script>
